<template>
	<view class="">
		<view class="line"></view>
		<view class="project_box">

			<view class="people" v-for="(item,index) in value" :key='index'>
				<view class="pic">
					<view class="image" v-for="(item,index) in item.managerList" :key='index'>
						<image :src="item.avatar" mode="widthFix" v-if="item.avatar"></image>
						<image src="../static/logo/logo_1024.png" mode="widthFix" v-else></image>
						<text>{{item.realname}}</text>
					</view>
					<view class="name_time">
						<view class="txt1" v-if="item.title">{{item.title}}</view>
						<view v-if="item.status">{{'('+item.status+')'}}</view>
					</view>
				</view>
				<view class="con">
					<view class="txt2">
						<view class="">
							<text>{{item.content}}</text>
						</view>
						<view class="">
							<image @click="lookImg(index,item.image)" v-for="(iteml,indexl)  in item.image" :key="indexl" :src="iteml" mode="widthFix"></image>
						</view>
						<view class="" v-for="(items,indexs) in item.comments" :key="indexs">
							<text>{{items.realname}}</text>
							<text>{{items.content}}</text>
							<image @click="lookImg(index,items.image)" v-for="(itemk,indexk)  in items.image" :key="indexk" :src="itemk"
							 mode="widthFix"></image>
						</view>
					</view>
				</view>
				<view class="time">{{item.confirm_time}}</view>
			</view>
		</view>

		<!-- 底部选择 -->
		<view class="btn_box" v-if="isShowBtn">
			<!-- 
				<view class="box"  >
					<image  src="@/static/approval/comment.png" mode=""></image>				
				    <text>1</text>
				</view>
				<view class="box"   >
					<image  src="@/static/approval/comment.png" mode=""></image>				
				    <text>1</text>
				</view>				
				<view  class="button_box refuse">2</view>			
				<view  class="button_box agree">2</view> -->


			<view class="box" v-for="(item,index) in btnValue" :key='index' v-if='item.id=="comment"' @click="resubmit(item)">
				<image src="@/static/approval/comment.png" mode=""></image>
				<text>{{item.label}}</text>
			</view>
			<view class="box" v-for="(item,index) in btnValue" :key='index' v-if="item.id=='backend'" @click="resubmit(item)">
				<image src="@/static/approval/submit.png" mode=""></image>
				<text>{{item.label}}</text>
			</view>
			<view class="box" v-for="(item,index) in btnValue" :key='index' v-if="item.id=='update'" @click="resubmit(item)">
				<image src="@/static/approval/clears.png" mode=""></image>
				<text>{{item.label}}</text>
			</view>
			<view class="button_box refuse" v-for="(item,index) in btnValue" :key='index' @click="resubmit(item)" v-if='item.id==="reject"'>
				拒绝
			</view>
			<view class="button_box agree" v-for="(item,index) in btnValue" :key='index' @click="resubmit(item)" v-if='item.id==="accept"'>
				同意
			</view>
			
		</view>

		<!-- 评论弹框 -->
		<uni-popup ref="popup" type="bottom">
			<view class="bottom_box">
				<view class="right_close" @click="$refs.popup.close()">
					<text>关闭</text>
				</view>
				<view class="comment_box">
					<textarea v-model="content" placeholder="请输入评论(必填)" style="font-size: 28upx;height: 150upx;" />
					<scroll-view class="comment_img"  scroll-y="true" style="height: 200upx;">
							<image @click="lookImg(index,comment_imgArry)"  v-for="(item,index) in comment_imgArry" :key='index' :src="item"  style="width: 100upx;" mode="widthFix"></image>							
						</scroll-view>
					</view>
					<view class="send_comment" >
						<view class="img_icon">
							<image @click="chooseImage" src="../static/images/img_icon.png" mode=""></image>
						</view>
					   <button type="default" @click="commentsSend"> 发送</button>	
					</view>
				</view>		
		</uni-popup>
		
		<!-- 拒绝弹框 -->
		<uni-popup  ref="rejectPopup" type="bottom">			
				<view class="bottom_box">
					<view class="right_close" @click="$refs.popup.close()">
						<text>关闭</text>
					</view>
					<view class="comment_box">
						<textarea v-model="content"  placeholder="请输入评论(必填)"style="font-size: 28upx;height: 150upx;" />
						<!-- <scroll-view class="comment_img"  scroll-y="true" style="height: 200upx;">
							<image v-for="(item,index) in comment_imgArry" :key='index' :src="item"  style="width: 100upx;" mode="widthFix"></image>							
						</scroll-view> -->
					</view>
					<view class="send_comment" >
						<view class="img_icon">
							<!-- <image @click="chooseImage" src="../static/images/img_icon.png" mode=""></image> -->
						</view>
					   <button type="default"  @click="rejectSend">发送</button>	
					</view>
				</view>		
		</uni-popup>
		<uni-popup ref="popups" type="dialog" style="z-index: 999;">
		    <uni-popup-dialog type="input" message="成功消息" title="提示" content="是否确定执行该操作?" :duration="2000"  confirmText='确定' cancelText="取消" :before-close="true" @close="closes" @confirm="confirms"></uni-popup-dialog>
		</uni-popup>
		
		<!-- 转交弹窗 -->
		<view class="dialog" v-if="showDialog">
			<view class="panel">
				<view class="panel-header">
					<view class="title">选择人员</view>
				</view>
				<view class="panel-body">
					<view class="row">
						<view class="col dialog-text">转交人员：</view>
						<view class="col">
							<input type="text" disabled v-model="transferForm.realname" placeholder="请选择" @click="changeUser" />
						</view>
					</view>
				</view>
				<view class="panel-footer">
					<view class="row">
						<view class="rol">
							<button type="default" size="mini" @click="comfirmBtn">确认</button>
						</view>
						<view class="rol">
							<button type="default" size="mini" @click="hideDialog">取消</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import sun from '@/utils/sun.js'
	export default{
		props:{
			//审核流程
			value:{
				type: Array,
				default () {
					return []
				}
			},
			//按钮展示
			btnValue:{
				type: Array,
				default () {
					return []
				}
			},
			isShowBtn:{
				type: Boolean,
				default () {
					return true
				}
			},
			transferForm:{
				type: Object,
				default(){
					return {}
				}
			}
		},
		data(){
			return{
				//上传评论的图
				comment_imgArry:[],
				content:'',//拒绝内容
				buttons:[],//临时存储
				realname:'',
				label:'',
				showDialog: false, // 转交弹窗
			}
		},
		created() {
			
	    	this.realname=uni.getStorageSync('user').realname
		},
		mounted() {
		},
		methods:{
			resubmit(e){
				let _this = this
				this.buttons=e;
				
				if(e.label=='评论'){	
				    this.content = ''
					this.comment_imgArry=[],
				    this.$refs.popup.open()				   
				}else if(e.label=='拒绝'){
					this.content = ''
					this.comment_imgArry=[],
					this.$refs.rejectPopup.open()
				}else if(e.label == '转交'){
					this.label = e.label
					this.showDialog = true
				}else{
					this.label=e.label;
					// uni.showModal({
					// 	title: '提示',
					// 	content: '是否确定执行该操作',
					// 	success: function (res) {
					// 		if (res.confirm) {							
					// 			_this.$emit('resubmit',{
					// 				content:_this.content,
					// 				label:e.label,									
					// 				api:_this.buttons.api,
					// 				id:_this.buttons.id,
					// 			})
					// 		} else if (res.cancel) {
					// 		}
					// 	}
					// })	
					this.$refs.popups.open()
				}
			},
			
			// 跳转选择用户
			changeUser(){
				this.$emit('resubmit', {content:this.content,
					label:this.label,									
					api:this.buttons.api,
					id:this.buttons.id,})
			},
			
			// 转交确认
			comfirmBtn(){
				
			},
			
			// 隐藏弹窗
			hideDialog() {
				this.showDialog = false;
				this.$emit('clearTransferForm')
			},
			
			//确认
			confirms(){
				let _this=this;
				_this.$emit('resubmit',{
					content:_this.content,
					label:this.label,									
					api:_this.buttons.api,
					id:_this.buttons.id,
				})
				_this.$refs.popups.close()
			},
			//取消
			closes(){
				this.$refs.popups.close()
			},
			//拒绝发送
			rejectSend(){
				this.$refs.rejectPopup.close()
				 this.$emit('resubmit',{content:this.content,label:'拒绝',api:this.buttons.api})
			},
			//评论发送
			commentsSend(){
				this.$refs.popup.close()
				this.$emit('resubmit',{content:this.content,label:'评论',api:this.buttons.api,image:this.comment_imgArry,})
			},
			chooseImage(e) {
				 let _this =this;				 				  
				 uni.chooseImage({
					 count: 9, //默认9
					 sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有				     
					 success: function (res) {									 							
						_this.upImg(res.tempFiles,e)					
					 }
				 });
			},
			lookImg(index,list){
				let _this=this
				 uni.previewImage({
					current:index,
					urls:list ,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							
						},
						fail: function(err) {
							
						}
					}
				});
			},
			//上传图片
			upImg(data,e){				
				let _this = this;
				uni.showLoading({})
				var i = data.i ? data.i : 0;//当前上传的哪张图片
				var success = data.success ? data.success : 0;//上传成功的个数
				var fail = data.fail ? data.fail : 0;//上传失败的个数
				uni.uploadFile({
					url:sun.http+"/h5/order.upload/doupload",													
					filePath:data[i].path,
					header:{
						
					},
					name:'file',
					formData:{
						token:uni.getStorageSync("token")?uni.getStorageSync("token"):''
					},
					success: (res) =>{
						if (JSON.parse(res.data).msg == "上传成功"){
							success++;//图片上传成功，图片上传成功的变量+1
							uni.hideLoading()
						}																									
						_this.comment_imgArry.push(JSON.parse(res.data).data.url)																			
					},
					fail:()=>{
					 fail++;//图片上传失败，图片上传失败的变量+1
					 // console.log('fail:' + i + "fail:" + fail);
					},
					complete: () => {
						i++;//这个图片执行完上传后，开始上传下一张
						if (i == data.length) {   //当图片传完时，停止调用
							uni.showToast({
								icon:'none',
								title: '成功：' + success + " 失败：" + fail,
							})
						} else {//若图片还没有传完，则继续调用函数
							data.i = i;
							data.success = success;
							data.fail = fail;
							_this.upImg(data,e);
						}
						
					}		
				})
			},
		}
	}
</script>

<style lang="less">
	.line{
		width:100%;
		height:16upx;
		background:rgba(246,246,246,1);
	}
	.project_box{
		width: 100%;
		height: auto;
		background: #FFFFFF;
		padding: 40upx 32upx;
		box-sizing: border-box;
		position: relative;
	}
	.people{
			width: 100%;
			display: flex;
			position: relative;
			.pic{	
				    width: 80%;
					position: absolute;
					left: 0;
					top: 0;
					display: flex;
					justify-content: left;
					align-items: center;
					.image{
						min-width: 80upx;																		
						position: relative;						
						display: flex;
						justify-content: center;
						flex-direction: column;
						align-items: center;
						margin-right: 10upx;
						text{
							font-size: 20upx;																					
						}
						image{
							width: 80upx;
							height: 80upx;
							border-radius: 50%;
						}
						
					}
					text{						
						font-size: 28upx;
					}
					.name_time{
						font-size: 28upx;
						color:rgba(102,102,102,1);
					}
				}
				.con{
					width: auto;
					margin-left: 43upx;
					margin-top: 62px;
					// padding-top: 100upx;
					text{
						width: auto;
						display: block;
						font-family:PingFangSC-Regular,PingFang SC;
						font-weight:400;
						padding-left: 76upx;
						box-sizing: border-box;
					}
					.txt1{
						font-size:34upx;
						color:rgba(51,51,51,1);
					}
					.txt2{
						width: 100%;
						padding-left: 76upx;
						padding-bottom: 30upx;
						box-sizing: border-box;
						min-height: 102upx;
						font-size:28upx;
						color:rgba(102,102,102,1);
						border-left: 4upx solid #D3D3D3;
						text{
							padding-left: 0;
							display: block;
						}
						image{
							width: 100upx;
							height: 100upx;
							border-radius: 0;
							margin-top: 10upx;
							margin-right: 20upx;
							border: 1upx solid #CCCCCC;
						}
						
					}
				}
				.time{
					min-width: 136upx;
					height: auto;
					position: absolute;
					right: 32upx;
					font-size:24upx;
					font-family:PingFangSC-Regular,PingFang SC;
					font-weight:400;
					color:rgba(153,153,153,1);
				}
		}
	.people:last-child .con .txt2{
		font-size:28upx;
		color:rgba(102,102,102,1);
		border-left: none;
	}
	
	
	//底部选择
	.btn_box{
		width: 100%;
		height: 120upx;
		position: fixed;
		left: 0;
		bottom: 0;
		background: #FFFFFF;
		border-top: 1upx solid #EEEEEE;
		z-index: 5;		
		box-sizing: border-box;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		.box{
			min-width:44upx;
			text-align: center;
			image{
				width: 44upx;
				height: 44upx;
			}
			text{
				font-size:22upx;
				color:rgba(102,102,102,1);
				display: block;
			}
		}			
		.button_box{
			width:195upx;
			height:72upx;							
			border-radius:5upx 0upx 0upx 5upx;
			border:1upx solid rgba(208,220,255,1);
			font-size:32upx;
			font-family:PingFangSC-Regular,PingFang SC;
			font-weight:400;
			line-height: 72upx;
			text-align: center;
		}
		.refuse{
			background: #FFFFFF;
			color:rgba(64,108,235,1);
		}
		.agree{
			background:rgba(64,108,235,1);
			color:rgba(255,255,255,1);
		}
		
	}
	
	
	
.bottom_box{
	width: 100%;
	height: 300upx;
	height: 50vh;
	background: #F1F1F1;
	padding: 30upx;
	box-sizing: border-box;
	position: relative;
	border-top-right-radius:30upx ;
	border-top-left-radius:30upx ;
	.comment_img{
		image{
			width: 100upx;
			height: 100upx;
		}
	}
	.send_comment{
		width: 100%;
		
		padding-top: 30upx;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom:30upx;		
		.img_icon{
			width: 100%;
			border-bottom: 1upx solid #DDDDDD;
			margin-bottom: 30upx;
			padding-left: 20upx;
			display: flex;
			justify-content: left;
			image{
				width: 50upx;
				height: 50upx;
				margin-left: 20upx;
			}
		}
		button{
			width: 600upx;
			font-size: 30upx;
			background: #007AFF;
			color: #FFFFFF;
		}
	}
}
.right_close{
	font-size: 28upx;
	color: #CCCCCC;
	position: absolute;
	right: 30upx;
	top: 30upx;
}


// 转交弹窗


		

.dialog {
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			background: rgba(0, 0, 0, .5);
			z-index: 1000;
			
			.row {
				padding: 20upx 32upx;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #ebedf0;
				font-size: 12px;
			
				.col {
					flex: 1;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}
			
				.col-right {
					text-align: end;
				}
			
			}
			
			.row:last-child {
				border: none;
			}
			
			button {
				color: #fff;
				background-color: rgb(0, 122, 255);
			}

			.panel {
				position: absolute;
				top: 30%;
				left: 5.5%;
				width: 80%;
				padding: 20upx 32upx;
				background-color: #fff;
				z-index: 3;

				.panel-header {
					padding: 20upx 0;
					font-size: 32upx;
				}

				.panel-body {

					.dialog-text {
						flex: none;
						width: 5rem;
					}

					.row:last-child {
						border-bottom: 1px solid #ebedf0;
					}

				}

				.panel-footer {

					.row {
						justify-content: space-around;

						.col {
							border: none;
						}
					}

				}

			}

		}

</style>
